/***************************************************************************
 *   Copyright (C) 2014 by Philipp Müller                                  *
 *   philipp.mueller@gmx.de                                                *
 *                                                                         *
 *   This program is free software; you can redistribute it and/or modify  *
 *   it under the terms of the GNU General Public License as published by  *
 *   the Free Software Foundation; either version 2 of the License, or     *
 *   (at your option) any later version.                                   *
 *                                                                         *
 *   This program is distributed in the hope that it will be useful,       *
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of        *
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the         *
 *   GNU General Public License for more details.                          *
 *                                                                         *
 *   You should have received a copy of the GNU General Public License     *
 *   along with this program; if not, write to the                         *
 *   Free Software Foundation, Inc.,                                       *
 *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA          *
 ***************************************************************************/

import QtQuick 2.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Controls 1.2

Flickable {
    width: mainWindow.width; height: mainWindow.height
    contentWidth: mainWindow.width; contentHeight: 2 * mainWindow.height

    anchors.fill: parent

    boundsBehavior: Flickable.DragOverBounds
    flickableDirection: Flickable.VerticalFlick
    clip: true

    Rectangle {
        id: screenOptions
        anchors.fill: parent
        color: "black"

        FocusScope {
            id: scope
            x: screenOptions.x; y: screenOptions.y
            width: screenOptions.width; height: screenOptions.height
        }

        PropertyAnimation { target: screenOptions; property: "opacity";
                            duration: 400; from: 0; to: 1;
                            easing.type: Easing.InOutQuad ; running: true }

        //Display definition of the list entries
        Component {
            id: mvpDelegate
            Item {
                width: parent.width; height: idContent.contentHeight * 1.5
                Text {
                    id: idContent
                    anchors { left: parent.left }
                    text: {
                        if ( VompRemote.currentHost === MvpRow ) {
                            MvpName + " *"
                        } else {
                            MvpName
                        }
                    }
                    font.pixelSize: 18 * screenScale
                }
                Text {
                    anchors { right: parent.right }
                    text: MvpIp
                    font.pixelSize: 18 * screenScale
                }

                MouseArea {
                    id: mouseAreaDelegate
                    z: 1
                    hoverEnabled: false
                    anchors.fill: parent
                    onClicked:
                    {
                        console.log("Index clicked: " + index )
                        if ( index >= 0 )
                        {
                            listViewMVP.currentIndex = index
                        }
                        focus: true
                    }
                }
            }
        }

        //Display
        Column {
            id: columnMVP
            anchors.horizontalCenter: parent.horizontalCenter; anchors.top: parent.top
            anchors.margins: 20 * screenScale
            spacing: 20 * screenScale
            anchors.fill: parent

            Rectangle {
                width: parent.width; height: 1
                border.width: 1
                border.color: "lightgrey"
            }

            Text {
                color: "white"
                text: qsTr( "Remote settings" )
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: 18 * screenScale
                font.bold: true
            }

            Row{
                spacing: 5 * screenScale
                anchors.horizontalCenter: parent.horizontalCenter

                Text {
                    color: "white"
                    text: qsTr( "Color buttons:" )
                    anchors.verticalCenter: colorButtonStyleSwitch.verticalCenter
                    font.pixelSize: 18 * screenScale
                }

                Switch {
                    id: colorButtonStyleSwitch
                    checked: VompRemote.colorButtonStyle
                    style: switchColorStyle
                    onCheckedChanged: {
                        console.log("Changed color button style: " + checked )
                        VompRemote.colorButtonStyle = checked
                    }
                }
            }

            Rectangle {
                width: parent.width; height: 1
                border.width: 1
                border.color: "lightgrey"
            }

            Text {
                color: "white"
                text: qsTr( "MVP settings" )
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: 18 * screenScale
                font.bold: true
            }

            ListView {
                Rectangle {
                    color: "white"
                    anchors.fill: parent
                    z: -1
                }
                id: listViewMVP
                model: MvpList

                delegate: mvpDelegate

                width: parent.width
                height: 100 * screenScale
                transformOrigin: Item.Center
                focus: true

                highlight: Rectangle { color: "lightsteelblue" }
            }

            Row {
                spacing: 5 * screenScale
                anchors.horizontalCenter: parent.horizontalCenter

                ButtonMenu {
                    id: buttonSelect
                    text: qsTr( "Select" )
                    onClicked: {
                        console.log( "OptionsPad: button Select pressed..." )
                        VompRemote.currentHost = listViewMVP.currentIndex
                    }
                }

                ButtonMenu {
                    id: buttonAdd
                    text: qsTr( "Add" )
                    onClicked: {
                        VompRemote.appendHost( editName.text, editIp.text )
                        console.log( "Add IP Address pressed with ip" + editIp.text )
                    }
                }

                ButtonMenu {
                    id: buttonRemove
                    text: qsTr( "Remove" )
                    onClicked: {
                        console.log( "OptionsPad: Remove IP Address pressed..." )
                        VompRemote.removeHost( listViewMVP.currentIndex )
                    }
                }
            }

            Grid {
                id: mvpButtons
                columns: 2
                spacing: 20 * screenScale
                verticalItemAlignment: Grid.AlignVCenter
                anchors.horizontalCenter: parent.horizontalCenter

                Text {
                    id: labelName
                    color: "white"
                    text: qsTr( "Name:" )
                    font.pixelSize: 18 * screenScale
                }

                TextField {
                    id: editName
                    width: 200 * screenScale
                    anchors.margins: 20 * screenScale
                    font.pixelSize: 18 * screenScale //Strange cannot be in touchStyle
                    style: touchStyle
                    focus: false
                }

                Text {
                    id: labelIp
                    color: "white"
                    text: qsTr( "Address:" )
                    font.pixelSize: 18 * screenScale
                }

                TextField {
                    id: editIp
                    width: 200 * screenScale
                    anchors.margins: 20 * screenScale
                    font.pixelSize: 18 * screenScale //Strange cannot be in touchStyle
                    style: touchStyle
                    focus: false
                }
            }

            //VDR settings
            Rectangle {
                width: parent.width; height: 1
                border.width: 1
                border.color: "lightgrey"
            }

            Text {
                color: "white"
                text: qsTr( "VDR settings" )
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: 18 * screenScale
                font.bold: true
            }

            Text {
                color: "white"
                text: qsTr( "(Experimental)" )
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: 18 * screenScale
            }

            Row{
                spacing: 5 * screenScale
                anchors.horizontalCenter: parent.horizontalCenter
                Text {
                    color: "white"
                    text: qsTr( "Enable VDR:" )
                    font.pixelSize: 18 * screenScale
                    anchors.verticalCenter: vdrEnabledSwitch.verticalCenter
                }
                Switch {
                    id: vdrEnabledSwitch
                    checked: VompRemote.vdrEnabled
                    style: switchOnOffStyle
                    onCheckedChanged: {
                        console.log("Enable VDR changed: " + checked )
                        VompRemote.vdrEnabled = checked
                    }
                }
            }

            FormInputDialog {
                id: vdrIpAddressDialog
                z: 100
                onClosed: {
                    if ( vdrIpAddressDialog.inputText != "" )
                    {
                        editName.focus = true
                        VompRemote.serverAddress = vdrIpAddressDialog.inputText
                    }
                }
            }

            Row {
                id: rowVDRLabels
                spacing: 20 * screenScale
                anchors.horizontalCenter: parent.horizontalCenter

                Text {
                    color: "white"
                    text: qsTr( "Server" ) + ": "
                    font.pixelSize: 18 * screenScale
                }

                Text {
                    color: "white"
                    text: VompRemote.serverName
                    font.pixelSize: 18 * screenScale
                }

                Text {
                    color: "white"
                    text: " - "
                    font.pixelSize: 18 * screenScale
                }

                Text {
                    color: "white"
                    text: VompRemote.serverAddress
                    font.pixelSize: 18 * screenScale
                }
            }

            Row {
                id: rowVDRButtons
                spacing: 20 * screenScale
                anchors.horizontalCenter: parent.horizontalCenter

                ButtonMenu {
                    id: buttonEnterVDR
                    text: qsTr( "Enter VDR IP address" )
                    visible: !VompRemote.vdrConnected

                    onClicked: {
                        vdrIpAddressDialog.show( qsTr( "Enter VDR IP address: " ) );
                    }
                }

                ButtonMenu {
                    id: buttonSearchVDR
                    text: qsTr( "Search for VDR" )
                    visible: !VompRemote.vdrConnected

                    onClicked: {
                        console.log( "Search VDR Ip" )
                        VompRemote.searchVdr();
                    }
                }
            }

        }

        Component {
            id: touchStyle

            TextFieldStyle {
                textColor: "white"
                background: Item {
                    implicitHeight: 24 * screenScale
                    implicitWidth: mainWindow.width * 0.5 * screenScale

                    BorderImage {
                        source: "qrc:/qml/VompRemote/icons/textinput.png"
                        border.left: 8 * screenScale
                        border.right: 8 * screenScale
                        anchors.bottom: parent.bottom
                        anchors.left: parent.left
                        anchors.right: parent.right
                    }
                }
            }
        }

        Component {
            id: switchColorStyle
            SwitchStyle {
                groove: Rectangle {
                    implicitHeight: 40 * screenScale
                    implicitWidth: 152 * screenScale

                    Rectangle {
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.bottom: parent.bottom

                        width: parent.width/2 - 2 * screenScale
                        height: 35 * screenScale
                        anchors.margins: 2 * screenScale
                        color: control.checked ? "#468bb7" : "#222"
                        Behavior on color { ColorAnimation {} }
                        Image {
                            anchors.centerIn: parent
                            width: Math.min( parent.height, parent.width )
                            height: Math.min( parent.height, parent.width )
                            source: "qrc:/qml/VompRemote/icons/buttons-square.png"
                        }
                    }
                    Item {
                        width: parent.width/2
                        height: parent.height
                        anchors.right: parent.right
                        Image {
                            anchors.centerIn: parent
                            width: Math.min( parent.height, parent.width )
                            height: Math.min( parent.height, parent.width ) * 13 / 27 //just half the height of square png
                            source: "qrc:/qml/VompRemote/icons/buttons-row.png"
                        }
                    }
                    color: "#222"
                    border.color: "#444"
                    border.width: 2 * screenScale
                }

                handle: Rectangle {
                    width: parent.parent.width/2
                    height: control.height
                    color: "#444"
                    border.color: "#555"
                    border.width: 2 * screenScale
                }
            }
        }

        Component {
            id: switchOnOffStyle
            SwitchStyle {
                groove: Rectangle {
                    implicitHeight: 40 * screenScale
                    implicitWidth: 152 * screenScale

                    Rectangle {
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.bottom: parent.bottom

                        width: parent.width/2 - 2 * screenScale
                        height: 35 * screenScale
                        anchors.margins: 2 * screenScale
                        color: control.checked ? "#468bb7" : "#222"
                        Behavior on color { ColorAnimation {} }
                        Text {
                            anchors.centerIn: parent
                            width: Math.min( parent.height, parent.width )
                            height: Math.min( parent.height, parent.width )
                            text: qsTr( "On" )
                            font.pixelSize: 18 * screenScale
                        }
                    }
                    Item {
                        width: parent.width/2
                        height: parent.height
                        anchors.right: parent.right
                        Text {
                            anchors.centerIn: parent
                            width: Math.min( parent.height, parent.width )
                            height: Math.min( parent.height, parent.width ) * 13 / 27 //just half the height of square png
                            text: qsTr( "Off" )
                            font.pixelSize: 18 * screenScale
                        }
                    }
                    color: "#222"
                    border.color: "#444"
                    border.width: 2 * screenScale
                }

                handle: Rectangle {
                    width: parent.parent.width/2
                    height: control.height
                    color: "#444"
                    border.color: "#555"
                    border.width: 2 * screenScale
                }
            }
        }
    }
}
